<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import { Logic } from './Logic.js';

const props = defineProps({
  mapdata: { type: Object, required: true },
});
defineExpose({
  downing: (done) => logic.drawStart(done),
});

let logic;
let editorRef = ref(null);

onMounted(() => {
  logic = new Logic(editorRef.value);
  logic.observer.addListener('selected', (data) => props.mapdata.dispatch('selected', data));
  props.mapdata.addListener('data', (data) => logic.load(data));
  props.mapdata.addListener('selected', (data) => logic.parser.selected(data.index));
});

onUnmounted(() => {
  logic && logic.destroy();
});
</script>

<template>
  <div class="MapEditor" ref="editorRef"></div>
</template>

<!-- 允许自定义宽高通过CSS进行控制 -->
<style scoped>
.MapEditor {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: gray;
}
</style>